<template>
  <div class="index">
    <!-- 频道列表
    https://vant-contrib.gitee.io/vant/#/zh-CN/tab#biao-qian-lan-gun-dong
    -->
    <van-tabs>
      <van-tab
        v-for="channel in channels"
        :title="channel.name"
        :key="channel.id"
      >
        <Articlelist @ZshowMoreAction="hShowMoreAction" :channel="channel"></Articlelist>
      </van-tab>
    </van-tabs>

    <!-- 文章列表 -->
    <van-popup  v-model="showMoreAction" :style="{ width: '80%' }">
      <moreAction @dis-like="hDislike"></moreAction>
    </van-popup>
  </div>
</template>

<script>
import { getChannels } from '../../store/channel'
import { disLike } from '../../store/article'
import Articlelist from '../article/article'
import moreAction from '../moreAction/index'
export default {
  name: 'Index',
  components: {
    Articlelist,
    moreAction
  },
  data () {
    return {
    //   active: 1
      articleID: null,
      channels: [],
      showMoreAction: false
    }
  },
  created () {
    this.loadChannel()
  },
  methods: {
    // 响应子组件moreAction中的不感兴趣
    hDislike (id) {
      console.log('hDislike')
      // 1.调用接口，传递当前文章编号
      disLike(this.articleID)
      // 2.关闭弹层
      this.showMoreAction = false
      // 3.通知文章列表去删除这个文章
    },
    // 响应子组件中的关闭按钮
    hShowMoreAction (articleID) {
      // 1.保存articleID
      this.articleID = articleID
      console.log(this.articleID)
      this.showMoreAction = true
    },
    async loadChannel () {
      try {
        const result = await getChannels()
        console.log(result)
        this.channels = result.data.data.channels
      } catch (error) {
        console.log(error)
      }
    }
  }
}
</script>

<style>

</style>
